<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户充值</title>
		<link rel="stylesheet" href="../css/body.css" />
		<link rel="stylesheet" href="../css/bootstrap.css" />
		<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
		<script type="text/javascript" src="../js/bootstrap.js"></script>
		<script type="text/javascript" src="../js/getPath.js" ></script>
		<style>
			.jumbotron{
				width: 400px;
				height: 200px;
				margin: 0px auto;
				margin-top: 100px;
			}
			#recharge-success,
			#recharge-error{
				padding-top: 150px;
				margin: 0px auto;
				width: 150px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="jumbotron">
				<div>
					<font style="font-family: '微软雅黑';font-weight: bold;">充值金额：&nbsp;&nbsp;</font>
				</div>
				<div class="form-group input-group">
					<span class="input-group-addon">$</span>  
                	<input type="text" class="form-control" name="rechargeMoney" placeholder="输入充值的金额"/>  
				</div>
				<a style="margin-left: 210px;" class="btn btn-success btn-lg" role="button" id="recharge">
					充值
				</a>
			</div>
		</div>
		<!-- 这是增加成功的页面，默认隐藏 -->
		<div class="modal fade" id="recharge-success" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="alert alert-success alert-dismissable">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
	                &times;
	            </button>
	        	    充值成功
	        </div>
		</div>
		
		<!-- 这是删除成功的页面，默认隐藏 -->
		<div class="modal fade" id="recharge-error" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="alert alert-danger alert-dismissable">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
	                &times;
	            </button>
	        	    充值失败
	        </div>
		</div>
	</body>
	<script>
		$(function(){
			
			/**
			 * 成功之后刷新
			 */
			$('.alert-success .close').click(function(){
				window.location.href = getPath() + "/user-home/user-home-page.html";
			});
			
			/**
			 * 用户进行充值
			 */
			$('#recharge').click(function(){
				$.ajax({
					type:"post",
					data:({
						'method':'rechargeAdd',
						'rechargeMoney':$('input[name="rechargeMoney"]').val(),
					}),
					url: getPath() + "/recharge",
					dataType:'json',
					success:function(data){
						if(data.result == 'success'){
							$('#recharge-success').modal('show');
						}else{
							$('#recharge-error').modal('show');
						}
					}
				});
			});
		});
	</script>
</html>
